/**
 * Created by 李海强1 on 2016/10/19.
 */
Ext.define('UDZ.view.Find_password', {
    extend: 'Ext.Panel', //继承.Panel*****
    xtype: 'password',
    requires: [
        'Ext.TitleBar',
        // 'Ext.field.Email',
        'Ext.MessageBox',
        'Ext.Img',
        'Ext.field.*'
    ],
    config: {
        xtype:'panel',
        style:'background-color:white;',
        cls:'find_password',
        fullscreen:true,
        layout:'vbox',
        items:[
            {
                xtype:'toolbar',
                title:'找回密码',
                items:[
                    {
                        xtype:'image',
                        cls:'myinfo_back',
                        id:'find_password_go_back',
                        src:'resources/images/left-arrow.png',
                    }
                ]
            },
            {
                xtype:'formpanel',
                id:'Find_password',
                flex:1,
                layout:{
                    type:'card',
                    animation:{
                        // type:'pop',
                        type:'slide',
                        direction:'left',
                        // duration:1000
                    }
                },
                items:[
                    {
                        xtype:'panel',
                        id:'div01',
                        style:'background-color:white;',
                        layout:{
                            type:'vbox'
                        },
                        items:[
                            {
                                height:100,
                                xtype:'panel',
                                style:"margin-top:15%;",
                                // styleHtmlContent:false,
                                layout:'vbox',
                                items:[
                                    {
                                        height:45,
                                        xtype:'panel',
                                        style:"width: 85%;margin: auto;",
                                        layout:'hbox',
                                        items:[
                                            {
                                                xtype:'image',
                                                src:'resources/images/mobile.png',
                                                width:40,
                                                height:40,
                                            },
                                            {
                                                flex:1,
                                                html:[
                                                    '<hr style="display: inline-block;height: 1px;width:100%;position: relative;top: 10px;">'
                                                ]
                                            },
                                            {
                                                xtype:'image',
                                                width:40,
                                                height:40,
                                                src:'resources/images/pointer.png',
                                            },
                                            {
                                                flex:1,
                                                html:[
                                                    '<hr style="display: inline-block;height: 1px;width:100%;position: relative;top: 10px;">'
                                                ]
                                            },
                                            {

                                                xtype:'image',
                                                width:40,
                                                height:40,
                                                src:'resources/images/miyue.png',
                                            },

                                        ]

                                    },
                                    {
                                        height:50,
                                        xtype:'panel',
                                        style:"width: 90%;margin: auto;",
                                        html:[
                                            '<div style="text-align: center;width: 100%;height: 20px;margin: auto;color: #a3a3a3;font-size:0.9rem;padding-top:5px">' +
                                            '<span style="float: left;color: #f4c600">邮箱号码</span>' +
                                            '<span >输入验证码</span>' +
                                            '<span style="float: right">输入密码</span>'+
                                            '</div>'
                                        ]

                                    }
                                ],

                            },
                            {
                                height:80,
                                xtype:'panel',
                                style:'margin-top:30px',
                                items:[
                                    {
                                        xtype:'emailfield',
                                        placeHolder:'请输入邮箱号',
                                        cls:'border find_password_emailbg',
                                        style:'position:relative;width:80%;margin:auto',
                                    }
                                ]
                            },
                            {
                                height:60,
                                xtype:'panel',
                                items:[
                                    {
                                        xtype:'button',
                                        cls:'next_first_btn',
                                        text:'下一步',
                                        listeners:{
                                            tap:function () {
                                                Ext.getCmp('Find_password').setActiveItem(1,'slide');
                                            }
                                        }
                                    }
                                ]
                            }
                        ]
                    },
                    {
                        xtype:'panel',
                        id:'div02',
                        style:'background-color:white',
                        layout:{
                            type:'vbox'
                        },
                        items:[
                            {
                                height:80,
                                xtype:'panel',
                                style:"margin-top:60px;",
                                layout:'vbox',
                                items:[
                                    {
                                        height:45,
                                        xtype:'panel',
                                        style:"width: 85%;margin: auto;",
                                        layout:'hbox',
                                        items:[
                                            {
                                                xtype:'image',
                                                src:'resources/images/mobileGrey.png',
                                                width:40,
                                                height:40,
                                                listeners:{
                                                    tap:function () {
                                                        Ext.getCmp('Find_password').setActiveItem(0,'slide');
                                                    }
                                                }
                                            },
                                            {
                                                flex:1,
                                                html:[
                                                    '<hr style="display: inline-block;height: 0px;width:100%;position: relative;top: 10px;">'
                                                ]
                                            },
                                            {
                                                xtype:'image',
                                                width:40,
                                                height:40,
                                                src:'resources/images/yellowPointer.png',
                                            },
                                            {
                                                flex:1,
                                                html:[
                                                    '<hr style="display: inline-block;height: 0px;width:100%;position: relative;top: 10px; ">'
                                                ]
                                            },
                                            {
                                                xtype:'image',
                                                width:40,
                                                height:40,
                                                src:'resources/images/miyue.png',
                                            },

                                        ]

                                    },
                                    {
                                        height:45,
                                        xtype:'panel',
                                        style:"width: 90%;margin: auto;",
                                        html:[
                                            '<div style="text-align: center;width: 100%;height: 20px;margin: auto;color: #a3a3a3;font-size:0.9rem;padding-top:5px">' +
                                            '<span style="float: left;">邮箱号码</span>' +
                                            '<span style="color: #f4c600" >输入验证码</span>' +
                                            '<span style="float: right">输入密码</span>'+
                                            '</div>'
                                        ]

                                    }
                                ],
                            },
                            {
                                height:90,
                                xtype:'panel',
                                style:'margin-top:30px',
                                layout:'vbox',
                                items:[
                                    {
                                        height:45,
                                        xtype:'textfield',
                                        placeHolder:'请输入验证码',
                                        cls:'border find_password_checkbg',
                                        style:'position:relative;width:80%;margin:auto',
                                    },
                                    {
                                        height:45,
                                        xtype:'panel',
                                        style:"width: 80%;margin: auto;margin-top:10px",
                                        layout:'hbox',
                                        items:[
                                            {
                                                flex:4,
                                                cls:'has_send_font',
                                                html:'验证码已发送至邮箱，请注意查收'
                                            },
                                            {
                                                width:100,
                                                height:40,
                                                cls:'reSend_btn',
                                                style:'',
                                                xtype:'button',
                                                text:'30S重新发送'
                                            }
                                        ]

                                    }
                                ]
                            },
                            {
                                height:60,
                                items:[
                                    {
                                        xtype:'button',
                                        cls:'next_first_btn',
                                        // id:'div03',
                                        text:'下一步',
                                        listeners:{
                                            tap:function () {
                                                Ext.getCmp('Find_password').setActiveItem(2,'slide');
                                            }
                                        }
                                    }
                                ]
                            }
                        ]
                    },
                    {
                        xtype:'panel',
                        id:'div03',
                        style:'background-color:white',
                        layout:{
                            type:'vbox'
                        },
                        items:[
                            {
                                height:100,
                                xtype:'panel',
                                style:"margin-top:60px;",
                                // styleHtmlContent:false,
                                layout:'vbox',
                                items:[
                                    {
                                        height:45,
                                        xtype:'panel',
                                        style:"width: 85%;margin: auto;",
                                        layout:'hbox',
                                        items:[
                                            {
                                                xtype:'image',
                                                src:'resources/images/mobileGrey.png',
                                                width:40,
                                                height:40,
                                                listeners:{
                                                    tap:function () {
                                                        Ext.getCmp('Find_password').setActiveItem(0,'slide');
                                                    }
                                                }
                                            },
                                            {
                                                flex:1,
                                                html:[
                                                    '<hr style="display: inline-block;height: 1px;width:100%;position: relative;top: 10px;">'
                                                ]
                                            },
                                            {
                                                xtype:'image',
                                                width:40,
                                                height:40,
                                                src:'resources/images/pointer.png',
                                                listeners:{
                                                    tap:function () {
                                                        Ext.getCmp('Find_password').setActiveItem(1,'slide');
                                                    }
                                                }
                                            },
                                            {
                                                flex:1,
                                                html:[
                                                    '<hr style="display: inline-block;height: 1px;width:100%;position: relative;top: 10px;">'
                                                ]
                                            },
                                            {

                                                xtype:'image',
                                                width:40,
                                                height:40,
                                                src:'resources/images/yellowMiyue.png',
                                            },

                                        ]

                                    },
                                    {
                                        height:45,
                                        xtype:'panel',
                                        style:"width: 90%;margin: auto;",
                                        html:[
                                            '<div style="text-align: center;width: 100%;height: 20px;margin: auto;color: #a3a3a3;font-size:0.9rem;padding-top:5px">' +
                                            '<span style="float: left;">邮箱号码</span>' +
                                            '<span >输入验证码</span>' +
                                            '<span style="float: right;color: #f4c600">输入密码</span>'+
                                            '</div>'
                                        ]

                                    }
                                ]
                            },
                            {
                                height:80,
                                xtype:'panel',
                                style:'margin-top:30px',
                                items:[
                                    {
                                        xtype:'passwordfield',
                                        cls:'border find_passwordbg',
                                        placeHolder:'请重新输入密码',
                                        style:'position:relative;width:80%;margin:auto',
                                        // label:'设置密码',
                                        // labelCls:'labelCls border-right'
                                    }
                                ]
                            },
                            {
                                height:60,
                                items:[
                                    {
                                        xtype:'button',
                                        cls:'next_first_btn',
                                        // id:'div03',
                                        text:'下一步',
                                        // listeners:{
                                        //     tap:function () {
                                        //         Ext.getCmp('Find_password').setActiveItem(0,'slide');
                                        //     }
                                        // }
                                    }
                                ]
                            }
                        ]
                    }
                ]
            }
        ]
    }
});
